@include('Admin.public.head')
<style>
    .am-table tr>th, .am-table tr>td{
        min-width:110px
    }
    @media only screen and (min-width: 641px){
        .am-modal {
            width: 840px;
            margin-left: -420px;
        }
    }
</style>
<body>
@include('Admin.public.menu')
<!-- 引入样式 -->
<div class=" admin-content" id="app">
    <div class="daohang">

    </div>
        <!--模态框-->
    <div class="am-modal am-modal-no-btn" tabindex="-1" id="my-popup">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">补货规格查看
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>

            <table class="am-table am-table-bordered am-table-striped am-table-compact">
                <thead>
                <tr>
                    <td>商品名称</td>
                    <td>此次报单规格</td>
                    <td>此次复消规格</td>
                </tr>
                </thead>

                <tbody>
                <tr class="am-active">
                    <td>@{{orderDetail.goods_name}}</td>
                    <td>@{{orderDetail.invoices_specs}}</td>
                    <td>@{{orderDetail.resale_specs}}</td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>
      <!--进货规格-->
      <div class="am-modal am-modal-no-btn" tabindex="-1" id="my-popup2">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">进货规格查看
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>

            <table class="am-table am-table-bordered am-table-striped am-table-compact">
                <thead>
                <tr>
                    <td>商品名称</td>
                    <td>规格</td>
                </tr>
                </thead>

                <tbody>
                <tr class="am-active">
                    <td>@{{orderDetail.goods_name}}</td>
                    <td>@{{orderDetail.purchase_specs}}</td>
                </tr>
                </tbody>
            </table>

            </div>
    </div>
    {{--    详情模态框--}}
    <div class="am-modal am-modal-no-btn" tabindex="-1" id="my-popup1" style="overflow: scroll;height: 400px;margin-top: -400px;background-color: #fff">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">@{{ detail.goods_name }}
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>

            <table class="am-table am-table-bordered am-table-striped am-table-compact">
                <thead>
                <tr>
                    <td>规格</td>
                    <td>更改前数量</td>
                    <td>更改后数量</td>
                </tr>
                </thead>

                <tbody>
                <tr class="am-active" v-for="(val,index) in detail.specs_after">
                <td>
                    <span v-for="vals in val.specs">
                        @{{ vals }}
                    </span>
                    </td>
                    <td>@{{ detail.specs_before[index].number }}</td>
                    <td>@{{ val.number }}</td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>

    <!--充值模态框-->
    <div class="admin-biaogelist">
        <div class="listbiaoti am-cf">
            <ul class="am-icon-yen">门店商品库存更改记录</ul>
            <dl class="am-icon-home" style="float: right;">当前位置： 首页 > <a href="#">库存更改记录</a></dl>
            <!--这里打开的是新页面-->
        </div>
        <div class="am-btn-toolbars am-btn-toolbar am-kg am-cf">
            <ul>
                <li>
                    <div class="block">
                        <el-date-picker
                                v-model="keyword.addtime"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                range-separator="~"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </li>

                <li>
                    <el-input v-model="keyword.keyword" class="keywords" placeholder="关键词搜索"></el-input>
                </li>
                <li>
                    <el-button type="primary" v-on:click="changeClick()">搜索</el-button>
                </li>
                <li> <el-button type="danger" v-on:click="resetOrder()">重置</el-button></li>
            </ul>
        </div>

        <form class="am-form am-g">
            <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
                <thead>
                <tr class="am-success">
                    <th>门店编号</th>
                    <th>门店名称</th>
                    <th>商品名称</th>
                    <th>修改前商品库存</th>
                    <th>修改后商品库存</th>
                    <th>备注</th>
                    <th>操作人</th>
                    <th>更改时间</th>
                     <th>进货规格</th>
                    <th>补货规格</th>
                    <th>修改详情</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="val,index in RechargeList">
                    <td>@{{ val.store_number }}</td>
                    <td>@{{ val.store_name }}</td>
                    <td>@{{ val.goods_name }}</td>
                    <td>@{{ val.goods_before }}</td>
                    <td>@{{ val.goods_after }}</td>
                    <td>@{{ val.remark }}</td>
                    <td>@{{ val.operator }}</td>
                    <td>@{{ val.addtime }}</td>
                    <td>
                    <a v-show="val.purchase_specs" data-am-modal="{target: '#my-popup2',height: 300}" class="am-btn am-btn-success"  v-on:click="handleDetail(index)">
                            <span class="am-icon-search" title="查看进货规格"> 查看</span>
                        </a>
                    </td>
                    <td>
                    <a v-show="val.invoices_specs || val.resale_specs" data-am-modal="{target: '#my-popup',height: 300}" class="am-btn am-btn-success"  v-on:click="handleDetail(index)">
                            <span class="am-icon-search" title="查看补货规格"> 查看</span>
                        </a>
                    </td>
                    <td>
                        <a  data-am-modal="{target: '#my-popup1',height: 300}" v-if="val.specs_after" class="am-btn am-btn-success"  v-on:click="detailChange(index)">
                            <span class="am-icon-search" :title="val.goods_name"> 查看</span>
                        </a>
                    </td>
                </tr>
                </tbody>
            </table>
            <!--分页-->
            <ul class="am-pagination am-fr">
                <div class="block">
                    <el-pagination
                            background
                            :page-size="PagesData.per_page"
                            :current-page = "PagesData.current_page"
                            layout="total , prev, pager, next"
                            :total="PagesData.total"
                            @prev-click="changeClick"
                            @next-click="changeClick"
                            @current-change="changeClick">
                        >
                    </el-pagination>
                </div>
            </ul>

        </form>

        <script type="text/javascript">

        </script>
        <script>
            var app = new Vue({
                el:"#app",
                data: {
                    RechargeList : [],//更改列表
                    PagesData:[],//分页
                    keyword:{ //关键字搜索
                        addtime:'',
                        keyword:'',
                    },
                    orderDetail:{},//查看规格详情
                    detail:''                 
                },
                //事件
                methods: {
                    //选择当前页
                    detailChange(index){
                        this.detail=this.RechargeList[index]
                        // console.log(this.detail.)
                    },
                    changeClick:function(e){
                        var rico = this
                        $.get("/admin/stores/stores",{'_token':'{{csrf_token()}}',class:'storeSaveAct',page:e,keyword:app.keyword},function (res) {
                            if(res.code){
                                app.RechargeList = res.data.data
                                app.PagesData = res.data

                            } else {
                                layer.msg(res.data);
                            }
                        });
                    },

                    initialize:function () {
                        var rico = this
                        //用户列表
                        $.get("/admin/stores/stores",{'_token':'{{csrf_token()}}',class:'storeSaveAct'},function (res) {
                            if(res.code){
                                app.RechargeList = res.data.data
                                app.PagesData = res.data
                                console.log(  app.PagesData);
                            } else {
                                layer.msg(res.data);
                            }
                        });
                    },

                    //重置
                    resetOrder:function(){
                        location.reload();
                    },
                    handleDetail:function (index) {
                        var that=this
                        that.orderDetail=that.RechargeList[index]
                        console.log(that.orderDetail)
                    }
                },

                //自动执行
                mounted: function () {
                    this.initialize();
                },
            })
        </script>


@include('Admin.public.foot')